<template>
  <div class="outline">
    <div class="main">
      <div class="welcome">
        欢迎回来，<br/>
        顺丰行ERP系统
      </div>
      <div class="describe">账号系统与开单系统一致，请使用开单软件账号登录!</div>
      <div class="form">
        <el-form label-position="left" label-width="auto" :model="loginform" :rules="rules" ref="loginform">
          <el-form-item prop="username">
          <el-select v-model="loginform.username" placeholder="请输入账号" class="account">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password v-model="loginform.password" type="password" placeholder="请输入密码" class="password"
            ></el-input>
          </el-form-item>

          <span class="forgot-password">忘记密码?</span>
          <el-checkbox v-model="loginform.remember" class="checkbox">记住密码</el-checkbox>
        </el-form>
      </div>
      <div class="login">
        <el-button class="login-btn" @click="submitLogin">登录</el-button>
        <div class="sperate">
          <span>第三方登录</span>
        </div>
        <div class="no-account">没有账号?联系管理员添加</div>
        <div class="no-account">版本更新时间：{{ updateTime }}</div>
<!--        <div><el-button @click="wecomLogin">企业微信登陆</el-button></div>-->
<!--        {{ userInfo.userid }}-->
      </div>
    </div>
  </div>

  <!--  <div class="container">-->
  <!--    <div class="logo">-->
  <!--      <img src="~@/assets/logo.png" alt="" width="400" height="200">-->
  <!--    </div>-->
  <!--    <div class="title">顺丰行ERP查询工具</div>-->
  <!--    <div class="box-login">-->
  <!--      <el-form label-position="left" label-width="auto" :model="loginform" :rules="rules" ref="loginform">-->
  <!--        <el-form-item label="账号" prop="username">-->
  <!--          <el-select v-model="loginform.username" placeholder="请选择" style="width: 100%;">-->
  <!--            <el-option-->
  <!--              v-for="item in options"-->
  <!--              :key="item.value"-->
  <!--              :label="item"-->
  <!--              :value="item">-->
  <!--            </el-option>-->
  <!--          </el-select>-->
  <!--&lt;!&ndash;          <el-input placeholder="请输入账号" v-model="loginform.username" clearable></el-input>&ndash;&gt;-->
  <!--        </el-form-item>-->
  <!--        <el-form-item label="密码" prop="password">-->
  <!--          <el-input placeholder="请输入密码" v-model="loginform.password" type="password" show-password clearable></el-input>-->
  <!--        </el-form-item>-->
  <!--        <el-form-item>-->
  <!--          <el-checkbox v-model="loginform.remember">记住密码</el-checkbox>-->
  <!--        </el-form-item>-->
  <!--        <el-button class="login-button" type="primary" style="width: 100%;" @click="submitLogin">登 录</el-button>-->
  <!--      </el-form>-->
  <!--    </div>-->
  <!--  </div>-->
</template>

<script>
import { setToken } from '@/utils/auth'
import { login } from '@/api/user'
import { getUsers } from '@/api/goods'
import axios from 'axios'
// import { getAccessToken } from '@/utils/weComSDK'
import requestWeixin from '@/utils/request-weixin'
import dayjs from 'dayjs'

let buildTime = null
let env = process.env.NODE_ENV
if(env === 'production') {
  buildTime = dayjs(BUILD_TIME).format('YYYY-MM-DD HH:mm:ss')
} else {
  buildTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
}

export default {
  name: 'Login',
  data() {
    return {
      loginform: {
        username: '',
        password: '',
        remember: false
      },
      code: null,
      userInfo: {},
      options: [],
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      updateTime: buildTime
    }
  },
  methods: {
    submitLogin() {
      this.$refs['loginform'].validate((valid) => {
        if (valid) {
          /* 以下是模拟登录 */
          login(this.loginform).then(res => {
            if (res.code === 200) {
              this.$message.success('登录成功')
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('user_info', JSON.stringify(res.data.user_info))
              if (this.loginform.remember) {
                localStorage.setItem('loginInfo', JSON.stringify(this.loginform))
              } else {
                localStorage.setItem('loginInfo', null)
              }
              localStorage.setItem('isLogin', true)
              this.$router.push('/')
            }
          })
        } else {
          console.log('error')
        }
      })
    },
    wecomLogin() {
      const redirect_uri = encodeURIComponent('http://dev.kcyu.top/#/login')
      const loginUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww8cc6318dfa44a24b&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_privateinfo&state=STATE&agentid=1000005#wechat_redirect`
      location.href = loginUrl
    },
    async getWecomUserInfo() {
      const access_token = await getAccessToken()
      this.$message.info(access_token)
      requestWeixin.get(`auth/getuserinfo?access_token=${access_token}&code=${this.code}`).then(res => {
        this.$message.info(res.userid)
        this.userInfo = res.userid
      })
    }
  },
  async mounted() {
    // console.log(await getAccessToken())
    if(location.href.indexOf('code') !== -1) {
      const code = location.href.split('code=')[1].split('&')[0]
      this.code = code

      this.getWecomUserInfo()
    }
  },
  created() {
    const loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
    if (loginInfo !== null) {
      this.loginform = loginInfo
    }

    getUsers().then((res) => {
      this.options = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
.outline {
  background: rgba(250, 251, 255, 1);
}

.main {
  background: rgba(250, 251, 255, 1);
  max-width: 768px;
  margin: auto;
  height: 100vh;
  padding: 40px;

  .welcome {
    font-size: 30px;
    //font-weight: bold;
    line-height: 40px;
    color: rgba(52, 57, 101, 1);
    margin-top: 30%;
  }

  .describe {
    font-size: 12px;
    color: rgb(84, 89, 136);
    margin-top: 15px;
  }

  .form {
    margin-top: 30px;
    .account {
      width: 100%;
    }

    ::v-deep .el-form-item__error {
      padding: 10px 30px;
      font-weight: bold;
    }

    ::v-deep .el-input__inner {
      border-radius: 25px;
      background-color: #ecf2ff;
      border: 0;
      height: 50px;
      padding: 10px 30px;
    }

    ::v-deep .el-input__suffix {
      right: 15px;
      top: 2px;
    }

    .forgot-password {
      float: right;
      font-size: 14px;
      margin: 10px 0;
      cursor: pointer;
      color: rgb(84, 89, 136);
    }

    .checkbox {
      margin: 10px 0;

      &.is-checked {
        ::v-deep .el-checkbox__inner {
          background-color: #343965;
          border-color: #343965;
        }
      }

      ::v-deep .el-checkbox__inner {
        background-color: transparent;
        border-color: #343965;
      }

      ::v-deep .el-checkbox__label {
        color: rgb(84, 89, 136);
      }
    }
  }

  .login {
    margin-top: 10px;

    .login-btn {
      width: 100%;
      height: 50px;
      border-radius: 25px;
      background-color: #585ce5;
      color: rgba(250, 251, 255, 1);
      box-shadow: 0px 7px 40px 0px rgba(0, 29, 176, 0.3);
    }

    .sperate {
      width: 100%;
      margin-top: 50px;
      border-top: 1px solid rgba(151, 154, 178, 0.3);
      text-align: center;

      span {
        display: inline-block;
        padding: 0 20px;
        font-size: 13px;
        color: rgb(84, 89, 136);
        background-color: #fafbff;
        position: relative;
        transform: translateY(-50%);
      }
    }

    .no-account {
      font-size: 13px;
      width: 100%;
      color: rgb(84, 89, 136);
      margin-top: 50px;
      text-align: center;
    }
  }
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .title {
    margin: 30px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
  }

  .box-login {
    margin: 50px 20px;

    \deep\ .el-input__inner {
      border-radius: 10px !important;
    }

  }

  .login-button {
    background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
    border-color: transparent;
    border-radius: 10px;
  }
}
</style>

<style lang="scss">
.el-select-dropdown {
  background-color: #fafbff;
  border-radius: 25px;
  .popper__arrow {
    left: 50%;
  }
}
</style>
